<template>
  <el-dialog title="提醒" width="400px" :visible.sync="visible" append-to-body>
    <div v-if="isSuccess" class="error-msg">
      导入成功
      <span style="color:#4AAE5F;">{{ msg }}</span>
      条数据
    </div>
    <div v-else class="error-msg">
      整个表格数据导入失败，请检查异常数据后重新导入
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="isSuccess" type="primary" @click="ok">去列表查看</el-button>
      <el-button v-else type="primary" @click="downloadError">下载失败记录</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { download } from '@/utils/download';
  export default {
    data() {
      return {
        statusCode: '200',
        msg: '',
        filePath: '',
        visible: false,
      };
    },
    computed: {
      isSuccess() {
        return this.statusCode === '200';
      },
    },
    methods: {
      open(data) {
        const { statusCode = '', filePath, msg } = data;
        this.statusCode = statusCode;
        this.filePath = filePath;
        this.msg = `${msg}` || '';
        this.visible = true;
      },
      cancel() {
        this.visible = false;
        this.statusCode = '200';
        this.filePath = '';
        this.msg = '';
      },
      downloadError() {
        download(this.filePath, '失败记录.xls');
        this.cancel();
        this.$emit('on-download-error');
      },
      ok() {
        this.cancel();
        this.$emit('on-ok');
        this.$router.replace('/careCard/distributeList');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .error-msg {
    padding: 8px 0;
    color: #7f848b;
  }
  .error-fail-title {
    color: #7f848b;
    padding: 8px 0;
  }
  .error-fail-list {
    color: #ff3b30;
    padding: 5px 0;
  }
  // .error-fail-list
</style>
